<!-- 阴影 -->
<template>
    <template v-if="type === 'text-shadow'">
        <si-shadow
            label="字体阴影"
            v-model:boxStyle="widget.widgetData.eles.customFeature.textStyle"
            v-model:boxR="widget.widgetData.eles.customFeature.textR"
            v-model:boxX="widget.widgetData.eles.customFeature.textX"
            v-model:boxY="widget.widgetData.eles.customFeature.textY"
            v-model:boxColor="widget.widgetData.eles.customFeature.textColor"
            @change="val => widget.widgetData.eles.style['text-shadow'] = val"
        />
    </template>
    <template v-else-if="type === 'box-shadow'">
        <si-shadow
            label="边框阴影"
            v-model:boxStyle="widget.widgetData.eles.customFeature.boxtStyle"
            v-model:boxR="widget.widgetData.eles.customFeature.boxR"
            v-model:boxX="widget.widgetData.eles.customFeature.boxX"
            v-model:boxY="widget.widgetData.eles.customFeature.boxY"
            v-model:boxColor="widget.widgetData.eles.customFeature.boxColor"
            @change="val => widget.widgetData.eles.style['box-shadow'] = val"
        />
    </template>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import { SiShadow } from '@/components/setting-pane/setting-item'
export default defineComponent({
    name: 'RowShadow',
    components: {
        SiShadow
    },
    props: {
        // 阴影类型(text-shadow字体阴影，box-shadow边框阴影)
        type: {
            type: String,
            default: 'box-shadow'
        },
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { type, widget } = toRefs(props)

        const widgetType = computed(() => widget.value?.widgetData?.eles?.type)

        return {
            type,
            widget,
            widgetType
        }
    }
})
</script>